<template>
	<div>
		<el-carousel :interval="5000" arrow="always" height="460px" class="setImgWidth">
			<el-carousel-item v-for="item in imgList" :key="item">
				<!-- <h3>{{ item }}</h3> -->
				<img :src="item.sshimage">
			</el-carousel-item>
		</el-carousel>
	</div>
</template>

<script>
	import {
		getBannerImag
	} from "@/utils/product"
	export default {
		name: 'rotation',
		data() {
			return {
				imgList: [{ 
						img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/189c7bce1eaf24bb058b56a64e063e6e.jpeg?thumb=1&w=1226&h=460&f=webp&q=90"
					},
					{
						img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/36b45c624f42fa81732457e3f9773dbd.jpg?thumb=1&w=1226&h=460&f=webp&q=90"
					},
					{
						img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/11366eceddaab36ed8dda2bf1f24b67a.jpeg?thumb=1&w=1226&h=460&f=webp&q=90"
					},
					{
						img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/05b2e16c007ca8bc2ae6e3541ad910df.jpg?thumb=1&w=1226&h=460&f=webp&q=90"
					}

				]
			}
		},
		mounted() {
			getBannerImag().then(res => {
				this.imgList = res.data.data.classificationdateilsPojo
			})
		}
	};
</script>

<style scoped>
	.el-carousel__item h3 {
		color: #475669;
		font-size: 18px;
		opacity: 0.75;
		line-height: 300px;
		margin: 0;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n + 1) {
		background-color: #d3dce6;
	}

	.el-carousel .el-carousel--horizontal {
		height: 1000px !important;
	}

	.setImgWidth {
		width: 100%;
	}
</style>
